<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-6">
        <div v-bind:id="message | capitalize | toLower">{{ message | capitalize | toLower }}</div>
        <input v-model="message" />
    </div>
    <script>
        var app6 = new Vue({
            el: '#app-6',
            data: {
                message: 'chen'
            },
            filters: {
                capitalize: function (value) {
                    if (!value) return '';
                    value = value.toString();
                    return value.charAt(0).toUpperCase() + value.slice(1);
                },
                toLower: function (value) {
                    if (!value) return '';
                    value = value.toString();
                    return value.toLower();
                } 
            }
        });
    </script>
</body>


</html>